<template>
  <div class="index">
    <!-- header顶部  -->
    <div class="my-header">
      <van-sticky>
        <div class="my-nav">
          <van-nav-bar
            :fixed="false"
            :border="false"
            style="background: #4fc08d; position: static"
          >
            <template #left>
              <van-image src="/image/01.png" width="30px" height="30px" round />
            </template>
            <template #right>
              <van-icon name="apps-o" size="18" />
            </template>
          </van-nav-bar>
        </div>
        <div class="a">
          <van-row>
            <van-search background="#4fc08d" shape="round" />
          </van-row>
        </div>
      </van-sticky>
    </div>

    <!-- swipe轮播图 -->

    <div class="my-swipe">
      <van-swipe
        :lazy-render="true"
        class="my-swipe1"
        :autoplay="3000"
        indicator-color="white"
      >
        <van-swipe-item>
          <img class="swipe" src="/image/lunbo/222.jpg" />
        </van-swipe-item>
        <van-swipe-item>
          <img class="swipe" src="/image/lunbo/333.jpg" />
        </van-swipe-item>
        <van-swipe-item>
          <img class="swipe" src="/image/lunbo/444.jpg" />
        </van-swipe-item>
        <van-swipe-item>
          <img class="swipe" src="/image/lunbo/555.jpg" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 导航栏 -->
    <div class="nav">
      <van-grid class="nav1" :border="false" :clickable="true">
        <van-grid-item v-for="value in 8" :key="value">
          <img src="/image/0123.jpg" alt="" />
          <p>栖霞苹果</p>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 背景色 -->
    <div id="beijing">
      <!-- 推荐商品 -->
      <div class="my-show">
        <div class="my-show1">
          <template>
            <van-image
              style="display: block"
              height="80px"
              src="/image/111.jpg"
            />
          </template>
        </div>
        <div class="my-show2">
          <template type="flex" justify="space-between">
            <van-image
              style="display: block"
              height="80px"
              src="/image/111.jpg"
            />
            <van-image
              style="display: block"
              height="80px"
              src="/image/111.jpg"
            />
          </template>
        </div>
      </div>

      <div class="my-xinpin">
        <div>
          <van-nav-bar :border="false" class="my-daohang">
            <template #left>
              <span style="fontsize: 16px">
                <van-icon name="fire-o" color="#ee0a24" />热销榜单
              </span>
            </template>
            <template #right>
              <span>更多></span>
            </template>
          </van-nav-bar>
        </div>

        <div class="jingpin">
          <van-grid :border="false" :gutter="6" :column-num="3">
            <van-grid-item
              style="margin-top: 6px"
              v-for="value in 3"
              :key="value"
            >
              <img src="/image/0123.jpg" />
              <div class="jingpin1">
                <p>这个不好吃....</p>
                <div>
                  <span class="span1">¥22.99</span>
                  <van-button class="span2" size="mini">购买</van-button>
                </div>
              </div>
            </van-grid-item>
          </van-grid>
        </div>

        <!-- <div class="add">
        
        <van-grid
            style="margin-top: 10px"
            :gutter="4"
            :border="false"
            :column-num="3"
          > 
          <div>
           <van-grid-item v-for="value in 3" :key="value">
              <van-image src="/image/0123.jpg" />
              <span class="a2">好吃不贵...</span>
              <div style="display: inline-block">
                <van-row>
                  <div style="border:1px solid blick">
                  <van-col span="8">¥22.99</van-col>
                  <van-col span="8" offset="8">
                    <div>
                      <template>
                        <van-button size="mini">按钮</van-button>       
                      </template>
                    </div>
                  </van-col>
                  </div>
                </van-row>
              </div>
            </van-grid-item> 
            </div>
         <van-grid-item>
            <van-image src="/image/0123.jpg" />
            <span class="a2" >好吃不贵...</span>
            <div style="display: flax">
              <span class="a1">¥22.99</span>
              <van-button type="default">默认按钮</van-button>
            </div>
          </van-grid-item>
          <van-grid-item>
            <van-image src="/image/0123.jpg" />
            <span class="a2">好吃不贵...</span>
            <div style="display: flax">
              <span class="a1">¥22.99</span>
              <van-button type="default">默认按钮</van-button>
            </div>
          </van-grid-item>
          </van-grid> 
        </div> -->
      </div>

      <!-- 商品展示区 -->
      <div id="shopping">
        <div id="my-nav">
          <van-nav-bar :border="false" class="my-daohang">
            <template #left>
              <span style="fontsize: 16px; fontweight: 900">
                <van-icon name="fire-o" color="#ee0a24" />精品推荐
              </span>
            </template>
            <template #right>
              <span>更多></span>
            </template>
          </van-nav-bar>
        </div>
        <div class="sopping">
          <div class="sopping1" v-for="value in 20" :key="value">
            <van-card
              origin-price="10.00"
              price="2.00"
              desc="重庆万州好吃的橘子"
              title="好吃，不贵"
              thumb="/image/0123.jpg"
            >
              <template #footer class="btn">
                <van-button size="mini">去抢购</van-button>
              </template>
            </van-card>
          </div>
        </div>
      </div>
    </div>

    <!-- foot底部 -->
    <!-- <van-tabbar v-model="myfoot" route>
      <van-tabbar-item icon="home-o" name="home" to="/index"
        >首页</van-tabbar-item
      >
      <van-tabbar-item icon="apps-o" name="classify" to="/classify"
        >分类</van-tabbar-item
      >
      <van-tabbar-item icon="shopping-cart-o" name="carts" to="/shoppingCart"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item icon="user-o" name="mine" to="/user"
        >我的</van-tabbar-item
      >
    </van-tabbar> -->
    <MyFoot></MyFoot>
  </div>
</template>

<script>
import MyFoot from "../components/MyFoot.vue"
export default {
  components: { MyFoot },
  data() {
    return {
      // 底部
      // myfoot: "home",
    }
  },
}
</script>

<style lang="scss" scoped></style>
